<template>
  <div class="content-com">
    <div class="block-col">
      <BlockItem v-loading="projectLoading" element-loading-background="rgba(17, 51, 135, 0.8)" title="重点投资项目" class="block-item">
        <div class="light-block">
          <Light :inner="12" class="light-item" :selected="projectLight==1" color="#00e9e6"></Light>
          <Light :inner="12" class="light-item" :selected="projectLight==2" color="#fbd504"></Light>
          <Light :inner="12" class="light-item" :selected="projectLight==3" color="#fe0000"></Light>
        </div>
        <div class="chart">
          <el-carousel v-if="!projectLoading" direction="vertical" indicator-position="none" :height="carouselHeight" :interval="changeTime" :loop="false" @change="carouselChange($event,'project')">
            <el-carousel-item v-for="(item,index) in project" :key="item.id">
              <RollStatisticsItem :index="index" :type="1"  :color="color[projectLight]" :data="item"></RollStatisticsItem>
            </el-carousel-item>
          </el-carousel>
        </div>
      </BlockItem>
      <BlockItem v-loading="capitalLoading" element-loading-background="rgba(17, 51, 135, 0.8)" title="争取资金" class="block-item">
        <div class="light-block">
          <Light :selected="capitalLight==1" :inner="12" class="light-item" color="#00e9e6"></Light>
          <Light :selected="capitalLight==2" :inner="12" class="light-item" color="#fbd504"></Light>
          <Light :selected="capitalLight==3" :inner="12" class="light-item" color="#fe0000"></Light>
        </div>
        <div class="chart">
          <el-carousel v-if="!capitalLoading" direction="vertical" indicator-position="none" :height="carouselHeight" :interval="changeTime" :loop="false" @change="carouselChange($event,'capital')">
            <el-carousel-item v-for="(item,index) in capital" :key="item.id">
              <RollStatisticsItem :type="2" :index="index" :color="color[capitalLight]" :data="item"></RollStatisticsItem>
            </el-carousel-item>
          </el-carousel>
        </div>
      </BlockItem>
      <BlockItem v-loading="businessLoading" element-loading-background="rgba(17, 51, 135, 0.8)" title="招商引资" class="block-item">
        <div class="light-block">
          <Light :selected="businessLight==1" :inner="12" class="light-item" color="#00e9e6"></Light>
          <Light :selected="businessLight==2" :inner="12" class="light-item" color="#fbd504"></Light>
          <Light :selected="businessLight==3" :inner="12" class="light-item" color="#fe0000"></Light>
        </div>
        <div class="chart">
          <el-carousel v-if="!businessLoading" direction="vertical" indicator-position="none" :height="carouselHeight" :interval="changeTime" :loop="false" @change="carouselChange($event,'business')">
            <el-carousel-item v-for="(item,index) in business" :key="item.id">
              <RollStatisticsItem :type="3" :index="index" :color="color[businessLight]" :data="item"></RollStatisticsItem>
            </el-carousel-item>
          </el-carousel>

        </div>
      </BlockItem>
    </div>
    <div class="block-col full">
      <div class="number-block">
        <NumberItem v-loading="capitalLoading" element-loading-background="rgba(17, 51, 135, 0.8)" class="number-item" v-for="item in numberData" :key="item.id" :id="item.id" :name="item.name" :number="item.number" :color="item.color" :unit="item.unit" :icon="item.icon" :complete="item.complete"></NumberItem>
      </div>
      <BlockItem title="重点工作任务完成情况" class="block-item">
        <RollList></RollList>
      </BlockItem>
    </div>
    <div class="block-col">
      <BlockItem title="重点投资项目" class="block-item full">
        <div class="chart" id="key-projects"></div>
      </BlockItem>
      <BlockItem title="争取资金及招商引资" class="block-item">
        <div class="chart" id="business"></div>
      </BlockItem>
    </div>
  </div>
</template>

<script>
import BlockItem from "../BlockItem/BlockItem.vue";
import Light from "../Light/Light.vue";
import RollStatisticsItem from "../Statistics/RollStatistics.vue";
import NumberItem from "../Statistics/NumberItem.vue";
import RollList from "../Statistics/RollList.vue";
import {
  getBusinessChart,
  getBusinessList,
  getCapitalList,
  getKeyProjectChart,
  getProjectList,
  getStatisticsCount
} from "../../api/api";
export default {
  name: "Content",
  components: {RollList, NumberItem, RollStatisticsItem, Light, BlockItem},
  data(){
    return{
      carouselHeight:'0px',
      changeTime:10*1000,

      color:['','#00e9e6','#fbd504','#fe0000'],
      projectLight:1,
      project:[],
      projectLoading:false,

      capitalLight:1,
      capital:[],
      capitalLoading:false,


      businessLight:1,
      business:[],
      businessLoading:false,
      numberData: [
        {
          id: 1,
          unit: '个',
          color: ['#1485e5', '#3056ff'],
          name: '重点投资项目',
          icon: 'icon-xiangmu',
          number: 0,
          complete:0
        },
        {
          id: 2,
          unit: '万元',
          color: ['#11f2ae', '#0cb1df'],
          name: '招商引资任务',
          icon: 'icon-qianbao1',
          number: 0,
          complete:0
        },
        {
          id: 3,
          unit: '万元',
          color: ['#f8c85c', '#f78487'],
          name: '争取资金',
          icon: 'icon-zijinzouxiang',
          number: 0,
          complete:0
        },
      ],
      numberLoading:false,
      charts:null,
      charts2:null,
    }
  },
  watch:{
    projectLight:{
      handler(){
        this.getProject();
      },
      immediate:true
    },
    capitalLight:{
      handler(){
        this.getCapital();
      },
      immediate:true
    },
    businessLight:{
      handler(){
        this.getBusiness();
      },
      immediate:true
    },
  },
  methods:{
    carouselChange(e,node){
      if(e+1===this[node].length){
        setTimeout(()=>{
          this[node+'Light']=this[node+'Light']==3?1:this[node+'Light']+1;
        },this.changeTime)
      }
    },
    getProject(){
      if(this.projectLoading){
        setTimeout(()=>{
          this.getProject()
        },1000)
        return;
      }
      this.projectLoading=true;
      getProjectList({type:this.projectLight}).then((res)=>{
        this.project=res;
      }).finally(()=>{
        this.projectLoading=false;
      })
    },
    getCapital(){
      if(this.capitalLoading){
        setTimeout(()=>{
          this.getCapital()
        },1000)
        return;
      }
      this.capitalLoading=true;
      getCapitalList({type:this.capitalLight}).then((res)=>{
        this.capital=res;
      }).finally(()=>{
        this.capitalLoading=false;
      })
    },
    getBusiness(){
      if(this.businessLoading){
        setTimeout(()=>{
          this.getBusiness()
        },1000)
        return;
      }
      this.businessLoading=true;
      getBusinessList({type:this.businessLight}).then((res)=>{
        this.business=res;
      }).finally(()=>{
        this.businessLoading=false;
      })
    },
    initKeyProjectChart(){
      if(!this.charts){
        this.charts = this.$echarts.init(document.getElementById('key-projects'));
        this.charts.showLoading({
          text:'加载中',
          textColor:'#fff',
          maskColor:'rgba(0,0,0,0)'
        })
      }
      let option = {
        xAxis: {
          type: 'value',
          splitLine: {//分割线配置
            show:true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLabel:{
            textStyle:{
              show:true,
              color: '#fff'
            }
          },
        },
        legend:{
          textStyle:{
            color:'#fff'
          },
          right:10,
          top:5,
          itemWidth:15,
          itemHeight:15,
        },
        tooltip:{
          trigger:'axis',
          axisPointer:{
            type:'none'
          }
        },
        grid:{
          top:40,
          left:60,
          right:30,
          bottom:20
        },
        yAxis: {
          type: 'category',
          name:`单位：个`,
          nameTextStyle:{
            color:'#fff',
            fontSize:16
          },
          data: [],
          axisLabel:{
            textStyle:{
              show:true,
              color: '#fff',
              fontSize:12,
            },
            formatter:(value)=>{
              var ret = "";
              var maxLength = 4;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1)
              {
                for (var i = 0; i < rowN; i++) {
                  var temp = "";
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + "\n";
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          },
          axisTick:{
            show:false
          }
        },
        series: [
          {
            name:'蓝灯项目',
            data: [],
            type: 'bar',
            barGap:'50%',
            barWidth:7,
            itemStyle: {
              normal: {
                label:{
                  show:true,
                  position:'right',
                  textStyle:{
                    color:'#fff',
                    fontSize:12
                  },
                },
                barBorderRadius:[15, 15, 15, 15],
                color:'#00e9e6'
              }
            }
          },{
            name:'黄灯项目',
            data: [],
            type: 'bar',
            barWidth:7,
            itemStyle: {
              normal: {
                label:{
                  show:true,
                  position:'right',
                  textStyle:{
                    color:'#fff',
                    fontSize:12
                  },
                },
                barBorderRadius:[15, 15, 15, 15],
                color:'#fbd504'
              }
            }
          },{
            name:'红灯项目',
            data: [],
            type: 'bar',
            barWidth:7,
            itemStyle: {
              normal: {
                label:{
                  show:true,
                  position:'right',
                  textStyle:{
                    color:'#fff',
                    fontSize:12
                  },
                },
                barBorderRadius:[15, 15, 15, 15],
                color:'#fe0000'
              }
            }
          }
        ]
      }
      getKeyProjectChart({}).then(res=>{
        res.forEach(item=>{
          option.yAxis.data.push(item.name);
          option.series[0].data.push(item.blueSum)
          option.series[1].data.push(item.yellowSum)
          option.series[2].data.push(item.redSum)
        })
        this.charts.setOption(option)
      }).finally(()=>{
        this.charts.hideLoading();
      })
    },
    initBusinessChart(){
      if(!this.charts2){
        this.charts2 = this.$echarts.init(document.getElementById('business'));
        this.charts2.showLoading({
          text:'加载中',
          textColor:'#fff',
          maskColor:'rgba(0,0,0,0)'
        })
      }
      let option={
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            textStyle: {
              show: true,
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: 40,
          left: 60,
          right: 10,
          bottom: 20
        },
        legend:{
          textStyle:{
            color:'#fff'
          },
          right:10,
          top:10
        },
        yAxis: {
          type: 'value',
          name: '单位：万元',
          nameTextStyle: {
            color: '#fff',
            fontSize: 16
          },
          splitLine: {//分割线配置
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLabel: {
            textStyle: {
              show: true,
              color: '#fff',
              fontSize: 14
            }
          },
        },
        series: [
          {
            name: '争取资金',
            data: [],
            type: 'line',
            smooth:true,
            showSymbol:false,
            lineStyle:{
              normal:{
                width:3,
              }
            },
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: 'top',
                  textStyle: {
                    color: '#fff',
                    fontSize: 14
                  },
                },
                color:new this.$echarts.graphic.LinearGradient(0,1,0,0,[{
                  offset:0,
                  color:'#3b7ed7'
                },{
                  offset:1,
                  color:'#12d5e7'
                }])
              }
            }
          }, {
            name: '招商引资',
            smooth:true,
            showSymbol:false,
            data: [],
            type: 'line',
            lineStyle:{
              normal:{
                width:3,
              }
            },
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: 'top',
                  textStyle: {
                    color: '#fff',
                    fontSize: 14
                  },
                },
                color:new this.$echarts.graphic.LinearGradient(0,1,0,0,[{
                  offset:0,
                  color:'#ff7a45'
                },{
                  offset:1,
                  color:'#ffc448'
                }])
              }
            }
          },
        ]
      }
      getBusinessChart({}).then(res=>{
        option.xAxis.data=res.business.xData;
        option.series[0].data=res.business.yData;
        option.series[1].data=res.striveForFunds.yData
        this.charts2.setOption(option)
      }).finally(()=>{
        this.charts2.hideLoading();
      })
    },
    initNumber(){
      this.numberLoading=true
      getStatisticsCount({}).then(res=>{
        this.numberData[0].number=res.projectCount
        this.numberData[0].complete=res.projectEndCount
        this.numberData[1].number=res.businessCount
        this.numberData[1].complete=res.businessEndCount
        this.numberData[2].number=res.taskAllCount
        this.numberData[2].complete=res.taskEndAllCount
      }).finally(()=>{
        this.numberLoading=false;
      })
    }
  },
  beforeDestroy() {
    this.$bus.$off('updateData')
  },
  mounted() {
    this.carouselHeight=document.getElementsByClassName('chart')[0].offsetHeight.toString()+'px';
    this.initKeyProjectChart();
    this.initBusinessChart();
    this.initNumber()
    this.$bus.$on('updateData',()=>{
      this.initNumber()
      this.initKeyProjectChart();
      this.initBusinessChart();
    })
  }
}
</script>

<style scoped lang="scss">
.content-com{
  width: 100%;
  height: calc(100% - 80px);
  padding: 30px;
  padding-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .block-col{//比例1:1.5:1
    height: 100%;
    width: calc((100% - 60px)/7*2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .block-item{
      width: 100%;
      height: calc((100% - 60px)/3);
      position: relative;
      .chart{
        width: 100%;
        height: 100%;
        overflow-y: hidden;
      }
      .light-block{
        display: flex;
        align-items: center;
        position: absolute;
        right: 12px;
        top: 15px;
        .light-item{
          cursor: pointer;
          margin: 0 10px;
        }
      }
    }
    .block-item.full{
      height: calc((100% - 15px)/3*2);
    }
  }
  .block-col.full{
    width: calc((100% - 60px)/7*3);
    .number-block{
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .number-item{
        width:calc(100%/3 - 10px);
        height: 125px;
      }
    }
    .block-item{
      width: 100%;
      height: calc(100% - 145px);
      margin-top: 20px;
      position: relative;
      .chart{
        width: 100%;
        height: 100%;
      }
      .light-block{
        display: flex;
        align-items: center;
        position: absolute;
        right: 12px;
        top: 10px;
        .light-item{
          cursor: pointer;
          margin: 0 4px;
        }
      }
    }
  }
}
</style>
